<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, viewport-fit=cover" />
    <meta http-equiv="Content-Security-Policy-Report-Only" />
    <title>回溯管理</title>
    <link rel="stylesheet" href="../../assets/libs/amazeui/css/amazeui.min.css" />
    <link rel="stylesheet" href="../../assets/libs/amazeui/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="../../assets/libs/amazeui/css/app.css?v2017010301">
    <link rel="stylesheet" href="../../assets/css/core.css?v2017010301">
    <link rel="stylesheet" href="../../assets/libs/rrweb-player/rrweb-player_0.4.6.css" />
</head>

<body>
    <div id="app">
		<div class="am-u-sm-6 am-u-md-6 am-u-lg-6">
			<button style="border-radius: 5px;" type="button" class="am-btn am-btn-danger tpl-btn-bg-color-success am-btn-sm" @click='sure("2")' style="margin-right:10%">
				<span class="am-icon-reply"></span>&nbsp;返回
			</button>
		</div>
        <div class="list_title">视频回溯</div>
        <div class="replay" id="replay"></div>
        <div class="user-info">
			<div class="user-info-list">
                <ul>
                    <div style="padding-left:10px;font-weight: bold;">销售回溯信息</div>
                    <li><span>系统名称:</span><span> {{user_info.sysName}}</span></li>
                    <li><span>业务单号:</span><span> {{user_info.businessNo}}</span></li>
                    <li><span>投保人:</span><span> {{user_info.appliName}}</span></li>
                    <li><span>产品编号:</span><span> {{user_info.productCode}}</span></li>
                    <li><span>视频生成时间:</span><span> {{user_info.uploadTime}}</span></li>
                </ul>
            </div>
            <div class="user-info-list1">
                <div class="info">
                    <div class="list_title">访问记录</div>
                    <ul>
                        <li v-for='(item,index) in userList' :key='index'>{{item.userList}}于{{item.optTime}}查看</li>
                    </ul>
                </div>
            </div>
            <div class="user-info-list1">
                <div class="info">
                        <div class="list_title">申请审批记录</div>
                        <ul>
                            <li v-for='(item,index) in applyList' :key='index' :title="item.reqTime+'对于'+item.reqDetail+'的申请条件的意见是'+item.stateValue">{{item.reqTime}}对于{{item.reqDetail}}的申请条件的意见是{{item.stateValue}}</li>
                        </ul>
                </div>
            </div>
		</div>
		<div class='user-info' v-show='showList'>
            <div class="am-u-sm-12 am-u-sm-12 am-u-sm-12 del-padding" style="padding-bottom:2%">
                <div class="am-form-group am-u-sm-12">
                    <div class="am-u-sm-6  am-u-md-6  am-u-lg-6 ">
                        <button style="border-radius: 5px;float: right;" id="keep" type="button" class="am-btn am-btn-danger tpl-btn-bg-color-success am-btn-sm" @click='sure("1")' style="float:right;margin-right:10%">
                            <span class="am-icon-check"></span>&nbsp;通过
                    	</button>
                    </div>
                    <div class="am-u-sm-6 am-u-md-6 am-u-lg-6">
                        <button style="border-radius: 5px;" type="button" class="am-btn am-btn-danger tpl-btn-bg-color-success am-btn-sm" @click='back()' style="margin-right:10%">
                         <span class="am-icon-reply"></span>&nbsp;返回
                     </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 提示框 -->
    <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert1" >
        <div class="am-modal-dialog">
            <div class="am-modal-hd">提示</div>
            <div class="am-modal-bd" style="height:60px;">
                {{tipMsg}}
            </div>
            <div class="am-modal-footer">
                <!-- <span  class="am-modal-btn" @click="confirmBtn">确定</span> -->
                <span class="am-modal-btn"  data-am-modal-confirm>确定</span>
            </div>
        </div>
    </div>
</div>
<!-- </div> -->
    <script src="../../assets/libs/amazeui/js/jquery.min.js"></script>
    <script src="../../assets/libs/vue/vue.min.js"></script>
    <script src="../../assets/libs/amazeui/js/theme.js"></script>
    <script src="../../assets/libs/amazeui/js/amazeui.min.js"></script>
    <script src="../../assets/libs/amazeui/js/amazeui.datatables.min.js"></script>
    <script src="../../assets/libs/amazeui/js/dataTables.responsive.min.js"></script>
    <script id="time-cat" src="../../assets/libs/timecatjs.min.js"></script>
    <script id="time-cat" src="../../assets/libs/axios.min.js"></script>
    <script src="../../assets/libs/vue/vue.min.js"></script>
    <script src="../../assets/env.js?v2017010301"></script>
	<script src="../../assets/libs/rrweb-player/rrweb_player_0.4.6.js"></script>
    <script id="time-cat-init">
            var app = new Vue({
                el: "#app",
                data: {
                    userList: [],
                    user_info: {},
                    stateValue: "",
                    id: '',
                    businessNo: "",
                    // showList: false,
                    uni_timeline_icon: "uni_timeline_icon",
                    uni_listbox_last: "uni_listbox_last",
                    uni_listbox_notlast: "uni_listbox_notlast",
                    uni_listbox: "uni_listbox",
                    showList:true,
                    uni_data:[],
                    img_data:[],
                    space: '12px',
                    uni_icon: 'http://qiniu.iborge.cn/dian.png',
                    applyList:[],
                    imgMagnification: false, // 图片放大标识符
                    imgSrc: '', // 需要放大的图片编码
                    imgIndex: null,  // 放大截图的索引
                    // cutName: '',  //截图名称
                    tipMsg: '', // 提示语内容
                    fwjl: true,   // 访问记录容器隐藏
                },
                methods: {
                    // 上一张截图
                    last() {                   
                        this.imgIndex = this.imgIndex - 1
                        if(this.imgIndex < 0){
                            this.tipMsg = '这是第一张了！'
                            $('#my-alert1').modal({
                                relatedTarget: this,
                            });
                            this.imgIndex = 0
                            return false
                        }
                        this.img_data.forEach((item,index) => {
                            console.log(item,index)
                            if(this.imgIndex == index) {
                                this.imgSrc = item.base_code
                                // this.cutName = item.where_cut_name
                            }
                        })
                    },
                    // 下一张截图
                    next() {                                       
                        this.imgIndex = this.imgIndex + 1
                        if(this.imgIndex >= this.img_data.length){
                            this.tipMsg = '最后一张了！'
                            $('#my-alert1').modal({
                                relatedTarget: this,
                            });
                            console.log(this.tipMsg)
                            this.imgIndex = this.img_data.length-1     
                            return false
                        }
                        this.img_data.forEach((item,index) => {
                            if(this.imgIndex == index) {
                                this.imgSrc = item.base_code
                                // this.cutName = item.where_cut_name
                            }
                        })
                    },
                    // 截图放大
                    Magnification(src,index) {
                        this.imgSrc = src
                        this.imgIndex = index
                        this.imgMagnification = true
                    },
                    sure(value) {
                        const _this = this
                        let obj = {
                            id: _this.id, //, //数据主键id
                            businessNo: _this.businessNo, //, //业务识别号（保单号）
                            auditState: value == '1' ? '1' : '2'
                        }
                        console.log(obj)
                        axios({
                                method: 'post',
                                url: App.envUrl.backtrackUrl+"collect/updateCollect",
                                data: obj,
                            })
                            .then((data) => {
                                window.location.href = "archivehistoryquery.html"
                            })
                            .catch((err) => {});
                    },
                    back(){
                    	history.back(-1);
                    },
                    //轨迹查询
                    line(){
                        let obj = {
                            collectId:this.id,
                            // collectId:'c1841b5d-093d-41a2-9cb3-99715b2b3542',
                            // collectId: "fc3a50fc-4c3d-4bd7-9de3-8aa56298dcb3",
                        };
                        axios({
                            method: 'post',
                            url: App.envUrl.backtrackUrl+"collect/queryTrackByCollectId",
                            // url: 'http://192.168.1.81:8080/slxt-web/collect/queryTrackByCollectId',  // 文华本地
                            // url:'https://www.bjnfbk.com/slxt-web/collect/queryTrackByCollectId',  // 演示环境
                            data: obj,
                        })
                        .then((data) => {
                            if(data.data.code === '200'){
                                this.uni_data = data.data.data;
                            }
                        })
                        .catch((err) => {});        
                    },
                    //截图查询
                    html2canva(){
                        let obj = {
                            collectId:this.id,
                            // collectId:'9e2dae5a-43b6-4687-84c4-83a9c4f58733'  // 暂时测试用
                        };
                        axios({
                            method: 'post',
                            url: App.envUrl.backtrackUrl+"queryFileByCollectId",
                            // url: 'https://www.bjnfbk.com/slxt-web/queryFileByCollectId',  // 暂时测试用 演示环境
                            data: obj,
                        })
                        .then((data) => {
                            if(data.data.code === '200'){
                                this.img_data = data.data.data;//base_code where_cut_name
                                
                            }
                        })
                        .catch((err) => {});  
                    },
                    //申请审批记录
                    apply(){
                        let obj = {
                            id:this.id,
                        };
                        axios({
                            method: 'post',
                            url: App.envUrl.backtrackUrl+"collect/queryRecord",
                            data: obj,
                        })
                        .then((data) => {
                            if(data.data.code === '200'){
                                let list = data.data.data;
                                list.forEach((element) => {
                                    element.stateValue = "";
                                    if (element.status == 0) {
                                        element.stateValue = "未审核";
                                    } else if (element.status == 1) {
                                        element.stateValue = "通过";
                                    } else if (element.status == 2) {
                                        element.stateValue = "拒绝";
                                    } else if (element.status == 3) {
                                        element.stateValue = "审核中";
                                    }
                                });
                                this.applyList = list;
                            }
                        })
                        .catch((err) => {}); 
                    }

                },
                computed: {
                    uni_space() {
                    return "height:" + this.space;
                    }
                },
                mounted(){
                    this.line();
                    this.html2canva();
                    this.apply();
                },
                
                created() {
                    const _this = this
                    var query = window.location.search.substring(1);
                    var vars = query.split("&");
                    var id = ''
                    var businessNo = ''
                    for (var i = 0; i < vars.length; i++) {
                        var pair = vars[i].split("=");
                        if (pair[0] == 'id') {
                            id = pair[1];
                            _this.id = id
                        }
                        if (pair[0] == 'businessNo') {
                            businessNo = pair[1];
                            _this.businessNo = businessNo
                        }
                    }
                    let obj = {
                        id: id, //数据主键id
                        businessNo: businessNo, //业务识别号（保单号）
                    }
                    axios({
                            method: 'post',
                            url: App.envUrl.backtrackUrl+"collect/queryDataFile",
                            data: obj,
                        })
                        .then((data) => {
                            var lastJson = data.data.data
                            _this.userList = data.data.userList
                            if(_this.userList == null ||_this.userList.length == 0 ||_this.userList == undefined  ) {
                                _this.fwjl = false
                            }
                            openMido(lastJson)
                            _this.showList = true
                        })
                        .catch((err) => {});
                    let obj1 = {
                        id: id, //数据主键id
                        businessNo: businessNo, //业务识别号（保单号）
                    }
                    axios({
                            method: 'post',
                            url: App.envUrl.backtrackUrl+"collect/queryDataList",
                            data: obj1,
                        })
                        .then((data) => {
                            _this.user_info = data.data.pageCount.datas[0];
                            if (_this.user_info.auditState == 0) {
                                _this.stateValue = '未审核'
                            } else if (_this.user_info.auditState == 1) {
                                _this.stateValue = '通过'
                            } else if (_this.user_info.auditState == 2) {
                                _this.stateValue = '拒绝'
                            }
                        })
                        .catch((err) => {});

                    function openMido(lastJson) {
                        for(var i = 0;i<lastJson.length;i++){
                        	lastJson[i] = JSON.parse(lastJson[i]);
                        }
						const events = lastJson;
						/*replayer = new rrweb.Replayer(events,{
							root:document.getElementById('replay'),
							showDebug:true,
							speed:2,
							showWarning:true,
						});
						replayer.play();*/
						new rrwebPlayer({
						  target: document.getElementById('replay'), // 可以自定义 DOM 元素
						  data: {
							events,
						  },
						});
                    }
                },
            });
    </script>
    <style>
        html {
            background-color: #E9ECF3;
        }
        .user-info {
            width: 500px;
        }
        .uni_listbox {
        box-sizing: border-box;
        margin: 20px;
        height: 60px;
        position: relative;
        }
        .uni_listbox_last {
        height: 20px;
        }
        .uni_listbox_notlast {
        height: 60px;
        margin-left: 18px;
        border-left: 3px solid rgb(228, 228, 228);
        }
        #uni_timeline{
            /* max-height: 260px; */
            height: 260px;
            /* overflow-y: scroll; */
            /* min-height: 20px; */
            /* border: 1px solid #ccc; */
            background-color: #fff;
            border-radius: 5px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            list-style: none;
            padding-left: 0px;
            box-sizing: border-box;
            overflow: auto;
        }
        .uni_listbox p {
        position: absolute;
        top: 0;
        left: 0;
        /* transform: translateY(-50%); */
        margin-left: -9px;
        margin-top: -18px;
        vertical-align: middle;
        height: 16px;
        line-height: 16px;
        }
        .uni_timeline_icon {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 16px;
        height: 16px;
        vertical-align: middle;
        }
        .uni_timeline_title {
        font-weight: bold;
        text-align: left;
        font-size: 12px;
        display: inline-block;
        /* width: 500px; */
        margin: 0 30px;
        color: rgb(100, 100, 100);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        }
        .uni_timeline_content {
        text-align: left;
        height: 70%;
        padding: 10px 21px;
        font-size: 14px;
        color: rgb(100, 100, 100);
        overflow: hidden;
        }
        .user-info{
        	display:flex;
        	width:100%;
        	justify-content: space-between;
        }
        .user-info-list {
            overflow: hidden;
            width: 300px;
            height: 300px;
            min-height: 20px;
            margin-top: 10px;
            border-radius: 10px;
            background: #fff;
        }
        .user-info-list1 {
        	margin-top: 10px;
            width: 300px;
            min-height: 20px;
            overflow: hidden;
            border-radius: 10px;
        }
        .user-info-list1 .info{
            width: 300px;
            float: left;
            margin-right: 10px;
        }
        .user-info-list1 .info:nth-child(1){
            margin-right: 2%;
        }
        .list_title {
            height: 30px;
            line-height: 30px;
            padding-left: 20px;
            background-color: #fff;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom: 1px solid #E6E6E6;
            font-weight: bold;

        }
        .user-info-list1 ul {
            margin: 0px;
            width: 100%;
            height: 260px;
            min-height: 20px;
            /* border: 1px solid #ccc; */
            background-color: #fff;
            border-radius: 5px;
            list-style: none;
            padding-left: 0px;
            box-sizing: border-box;
            overflow: auto;
        }
        .user-info-list ul {
            margin: 0px;
            width: 100%;
            height: 100%;
            min-height: 20px;
            /* border: 1px solid #ccc; */
            border: none;
            border-radius: 5px;
            list-style: none;
            padding-left: 0px;
            box-sizing: border-box;
            overflow: auto;
        }
        
        .user-info-list ul li,.user-info-list1 ul li {
            width: 100%;
            color: #838FA1;
            min-height: 30px;
            line-height: 30px;
            clear: both;
            padding-left: 10px;
            padding-right: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .user-info-list ul li:nth-child(2n-1),.user-info-list1 ul li:nth-child(2n-1) {
            background: #f7f8fa;
        }
        
        .user-info-list ul li:nth-child(2n),.user-info-list1 ul li:nth-child(2n) {
            background: #f7f8fa;
        }
        
        .user-info-list ul li span:nth-child(1),.user-info-list1 ul li span:nth-child(1) {
            float: left;
            width: 40%;
        }
        
        .user-info-list ul li span:nth-child(2),.user-info-list1 ul li span:nth-child(2) {
            float: left;
            width: 60%;
        }
        
        .user-info-list ul li,.user-info-list1 ul li {
            list-style: none;
        }
        
        .audit {
            text-align: center;
        }
        
        #app {
            height: auto;
            position: absolute;
            width: 100%;
            /* height: 100%; */
            overflow: auto;
            padding: 10px;
            /* background: #fff; */
        }
        
        #cat-main {
            /* height: 620px !important; */
            left: 340px !important;
            top: 100px !important;
            /* width: 450px !important; */
        }
        /*滚动条样式*/
        
         ::-webkit-scrollbar {
            width: 3px !important;
            height: 4px !important;
        }
        
         ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: rgba(0, 0, 0, 0.2);
        }
        
         ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 0;
            background: rgba(0, 0, 0, 0.1);
        }
        
        #cat-player {
            /* height: 500px;
            width: 500px; */
        }
        .img-magnification {
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: rgba(0,0,0, .5);
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow-y: scroll;
            overflow-x: hidden;
        }
        .img-magnification img{
            margin-left: 50%;
            transform: translateX(-50%);
            margin-top: 100px;
        }
        .lt {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(0,0,0, .4);
            font-size: 30px;
            color: #ccc;
            line-height: 35px;
            text-align: center;
            position: absolute;
            top: 300px;
            left: 3%;
        }
        .gt {
            position: absolute;
            top: 300px;
            left: 94%;
        }
		.replay{
			margin: 0 auto;
			min-height: 600px;
		}
		.rr-player{
			float:none!important;
			margin:0 auto;
		}
    </style>
</body>

</html>